<template>
 <div class="top">
        <div class="left">
            <span>订单提交成功，请尽快付款！订单号:</span>
            <b style="color:red;">{{ detail?.order_id }}</b>
        </div>
        <div class="total_fee">
            应付金额
            <b style="color:red;font-size:20px">
                {{ detail?.total_fee }}
            </b>
            元
        </div>
    </div>
    <div class="payment">
        <div class="title">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wechat_pay">
                </use>
            </svg>
            <b>
                微信支付
            </b>
            <span>请使用微信扫码支付</span>
        </div>
        <div class="main">
            <div class="left">
                <div class="qrcode" v-loading="qrLoading">
                    <!-- 展示二维码的地方 -->
                    <img :src="qrSrc" width="300" height="300" alt="">
                    <div class="pw-box-ft">
                        <div class="svg">
                            <svg class="icon">
                                <use xlink:href="#icon-weixin1"></use>
                            </svg>
                        </div>
                        <div class="qr-right">
                            <p>请使用微信扫一扫</p>
                            <p>扫描二维码支付</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">

            </div>
        </div>
        <el-descriptions title="订单信息">
            <el-descriptions-item label="创建时间">
                {{ detail?.create_time }}
            </el-descriptions-item>
            <el-descriptions-item label="用户名">
                {{ detail?.user_nickname }}
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
                {{ detail?.user_phone }}
            </el-descriptions-item>
            <el-descriptions-item label="产品名称">
                {{ detail?.orderDetail[0].productName }}
            </el-descriptions-item>
            <el-descriptions-item label="产品描述">
                {{ detail?.orderDetail[0].description }}
            </el-descriptions-item>
            <el-descriptions-item label="收件地址">
                {{ detail?.address }}
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>
<script setup>
import {useRoute,useRouter} from 'vue-router'
import { ElMessage } from 'element-plus';
import * as api from '@/api/pay'
import { onUnmounted,ref } from 'vue';
//引入生成二维码的库
import qr from 'qrcode'
let route = useRoute()
let router = useRouter()
//声明一个定时器
let timeout = null
//1.发起请求，根据query 传递过来的order_id 获取订单详情
let {order_id }= route.query
//声明响应式变量存储订单的详情
let detail = ref()
//一个响应式变量储存
let qrSrc = ref('')
//一个二维码展示的加载动画效果
let qrLoading = ref(false)
let getOrder = async ()=>{
    qrLoading.value =true
   try{
    let res = await api.getOrderApi(order_id)
    console.log(res)
    //订单状态 order_status:订单状态：0未提交 1提交成功 2已取消 3无效订单 4交易关闭 5退货
    //订单状态为1的时候才能发起支付
    //获取订单状态
    let {order_status} = res.data.data
    detail.value = res.data.data
    //如果没有订单id
    if(!order_id){
        ElMessage({
            type:'error',
            message:'没有获取到订单,2秒后跳转到充值页'
        })
    }
    if(order_status===1){
        //先从本地查一下，这个订单有没有发起支付
        let code_url = localStorage.getItem(order_id)
        if(code_url){//这个订单已经发起支付，可能用户没有支付
            console.log(code_url)
            //使用qrcode将支付地址，变成二维码
            qr.toDataURL(code_url,(err,url)=>{
                console.log(url)
                if(err){
                    ElMessage.error(err.toString())
                    return
                    }
                qrSrc.value = url
                qrLoading.value =false
            })
        }else{
             //这个状态才可以支付，发起支付请求
            try{
                let res = await api.paymentApi(order_id)
                console.log(res)
                //因为同一个订单不能频繁发起支付，所以可以通过使用订单的id作为key，支付的返回的支付地址作为值，放到本地存储钟
                localStorage.setItem(order_id,JSON.stringify(res.data.code_url))
                  //使用qrcode将支付地址，变成二维码
                qr.toDataURL(res.data.code_url,(err,url)=>{
                    // console.log(url)
                    if(err){
                        ElMessage.error(err.toString())
                        return
                    }
                    qrSrc.value = url
                    qrLoading.value =false
                })
            }catch(e){
                console.log(e)
                
            }
       }
     
    }else{
        switch(order_status){
            case 0:
                ElMessage({
                    type:'error',
                    message:'订单未提交,2秒后返回充值页面'
                })
                break;
            // case 1:
            //     ElMessage({
            //         type:'error',
            //         message:'订单未提交'
            //     })
            //     break;
            case 2:
                ElMessage({
                    type:'error',
                    message:'订单已取消,2秒后返回充值页面'
                })
                break;
            case 3:
                ElMessage({
                    type:'error',
                    message:'无效订单,2秒后返回充值页面'
                })
                break;
            case 4:
                ElMessage({
                    type:'error',
                    message:'交易关闭,2秒后返回充值页面'
                })
                break;
        }
        timeout = setTimeout(()=>{
            router.push('/vipManager/charge')
        },2000)
    }
   }catch(e){
    console.log(e)
   }
}
getOrder()

//页面卸载的时候清除定时器
//使用ajax 轮询的方式，来查询支付的状态
//因为http的通讯特性，服务端不能主动推送内容给客户
//轮询：设定一个定时器，间隔性的发送请求，询问服务器，数据是否变化 
let poling =()=>{
    let interval = setInterval(async ()=>{
       let res = await api.queryPayStatusApi(order_id)
    //    console.log(res)
    if(res.data.state){
        //支付成功，跳转页面到支付成功页面，情调本地的缓存
        router.push('/pay/paySuccess')
        localStorage.removeItem(order_id)
    }
    },2000)
    return interval
}
let interval = poling()
onUnmounted(()=>{
    if(timeout){
        clearTimeout(timeout)
    }
    clearInterval(interval)
})
//支付流程围绕2部
//1.下单（预支付） 一般携带商品的id和商品的数据
//2.发起支付 调用支付接口 传递订单id 
</script>
<style scoped lang="scss">
.payment {
    background-color: #fff;
    padding: 5px 30px;
    box-shadow: 0 6px 32px rgb(0 0 0 / 13%);
}
.main {
    display: flex;
    justify-content: center;
}
.top {
    padding: 5px 5px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;

    .total_fee {
        margin-top: 10px;
    }
}
.title {
    margin: 10px 20px;

    b {
        font-size: 30px;
        display: inline-block;
        margin-right: 135px;
    }

    :deep(.icon) {
        vertical-align: text-bottom;
        width: 2em;
        height: 2em;
        margin-right: 10px;
    }
}
.pw-box-ft {
    height: 44px;
    padding: 8px 0 8px;
    background-image: linear-gradient(135deg, #4c67ff, #5635df);
    display: flex;

    justify-content: space-evenly;

    .qr-right {
        p {
            margin: 0;
            font-size: 14px;
            line-height: 22px;
            color: #fff;
            font-weight: 700;
        }
    }

    .icon {

        width: 3em;
        height: 3em;
    }
}
.right {
    width: 379px;
    height: 421px;
    padding-left: 50px;
    margin-top: -20px;
    background: url(../../../../asstes/phone.png) 50px 0 no-repeat;
}
</style>